<template>
  <view class="login">
    <view class="login-title">
      <view class="pr top-48">
        <view class="font-size-64 f-w-600 m-b-60">告别繁琐</view>
        <view class="font-size-48">一键触达业务</view>
      </view>
    </view>
    <view class="login-input">
      <view class="login-type-tabs">
        <div class="tabs-type-btn" :class="loginType === 'password' ? 'active-btn' : ''" @click="changeTabsType('password')">
          密码登录
        </div>
        <div class="tabs-type-btn" :class="loginType === 'code' ? 'active-btn' : ''" @click="changeTabsType('code')">
          验证码登录
        </div>
      </view>
      <view class="login-input-wrapper">
        <up-form :model="formData" :rules="rules" ref="uFormRef">
          <up-form-item v-if="loginType === 'password'" prop="name">
            <up-input
              v-model="formData.name"
              placeholder="输入账号/手机号"
              clearable
              class="bg-F4F4F4"
              :border="false"
            ></up-input>
          </up-form-item>
          <up-form-item v-if="loginType === 'password'" prop="password">
            <up-input v-model="formData.password" placeholder="输入密码" clearable class="bg-F4F4F4" :border="false"></up-input>
          </up-form-item>
          <up-form-item v-if="loginType === 'password'" prop="code">
            <up-input v-model="formData.code" placeholder="输入验证码" clearable class="bg-F4F4F4" :border="false">
              <template #suffix>
                验证码图片
                <!-- <image class="icon m-r-20 img-filter" src="../../static/icons/Frame 2.png"></image> -->
              </template>
            </up-input>
          </up-form-item>
          <up-form-item v-if="loginType === 'code'" prop="phone">
            <up-input v-model="formData.phone" placeholder="输入手机号" clearable class="bg-F4F4F4" :border="false"></up-input>
          </up-form-item>
          <up-form-item v-if="loginType === 'code'" prop="QRcode">
            <up-input v-model="formData.QRcode" placeholder="输入验证码" clearable class="bg-F4F4F4" :border="false">
              <template #suffix>
                <up-code ref="uCodeRef" @change="codeChange" type="text" seconds="20" changeText="X秒重新获取"></up-code>
                <up-text @tap="getCode" type="primary" :text="tips" size="mini"></up-text>
              </template>
            </up-input>
          </up-form-item>
        </up-form>
        <view class="flex flex-col flex-center m-t-20">
          <up-button type="primary" @click="submit()">登录</up-button>
          <view v-if="loginType !== 'code'" class="font-size-24 m-t-30">忘记密码？</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { route } from 'uview-plus'
// 表单引用
const uFormRef = ref()
const uCodeRef = ref()
// 登录方式
let loginType = ref('password')
let tips = ref('')
const changeTabsType = (type: string) => {
  loginType.value = type
}
// 响应式表单数据
let formData = ref({
  name: '',
  password: '',
  code: '',
  phone: '',
  QRcode: ''
})
// 校验规则
const rules = {
  name: [
    {
      required: true,
      message: '请输入账号/手机号',
      trigger: ['blur']
    },
    {
      // 自定义验证函数
      validator: (rule: unknown, value: string, callback: Function) => {
        // 返回true表示校验通过，返回false表示不通过
        return uni.$u.test.mobile(value)
      },
      message: '手机号码不正确',
      trigger: ['blur']
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['blur']
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: ['blur']
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: ['blur']
    },
    {
      validator: (rule: unknown, value: string, callback: Function) => {
        return uni.$u.test.mobile(value)
      }
    }
  ],
  QRcode: [
    {
      required: true,
      message: '请输入验证码',
      trigger: ['blur']
    }
  ]
}
// 提交方法
function submit() {
  uFormRef.value
    .validate()
    .then((valid: any) => {
      if (!valid) return
      // 通过验证逻辑
      uni.setStorageSync(
        'CONTRACT',
        'cna=5190ad21042a484e857cfb74923e7eac; Hm_lvt_928577df80b7410b12ba234523392843=1744179186; HMACCOUNT=25F20086E91624AD; Hm_lpvt_928577df80b7410b12ba234523392843=1744179189; bg_sessionid=.eJwdjEsKgCAYBu_yrVv4yrLLhKREi_RPeyDR3RN3wzDMC_IpxzCHiAmcM44Oi01u3hwm0UujTBVxJxtKc7rDlX1qDD4oprQctTz266Fb0Fm0uQVbw7amurJELcT3A8YrIIA:1u2OhB:5ttDzqbRpftwicC-9hFnM7iUdahn271eRAlhqnO8FvA'
      )
      gotoSelectSupplier()
    })
    .catch(() => {
      // 处理验证错误
    })
}
const codeChange = (text: string) => {
  tips.value = text
}

const getCode = () => {
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码'
    })
    setTimeout(() => {
      uni.hideLoading()
      // 这里此提示会被start()方法中的提示覆盖
      uni.$u.toast('验证码已发送')
      // 通知验证码组件内部开始倒计时
      uCodeRef.value.start()
    }, 2000)
  } else {
    uni.$u.toast('倒计时结束后再发送')
  }
}

const gotoSelectSupplier = () => {
  route({
    url: '/pages_login/select_supplier/select_supplier'
  })
}
onMounted(() => {
  // #ifdef MP-WEIXIN || MP-ALIPAY
  uFormRef.value?.setRules(rules)
  // #endif
})
</script>

<style lang="scss" scoped>
.login {
  padding: 44rpx;
  height: 100vh;
  width: 100%;
  background: url('@/static/images/bg.png') no-repeat;
  background-size: cover;
  box-sizing: border-box;
  .login-title {
    height: 35%;
    font-family: PingFang SC;
    line-height: 100%;
    letter-spacing: 0%;
  }
  .login-input {
    background-color: #ffffff;
    border-radius: 20rpx;
    .login-type-tabs {
      display: flex;
      margin-bottom: 30rpx;
      background-color: #ebf6ff;
      text-align: center;
      .tabs-type-btn {
        padding: 20rpx;
        color: #adaeb0;
        font-size: 36rpx;
        width: 50%;
      }
      .active-btn {
        color: #000;
        font-weight: bold;
        position: relative;
        z-index: 88;
        background-color: #ffffff;
        &::after {
          content: '';
          position: absolute;
          bottom: 20rpx;
          left: 45%;
          transform: translate(-50%);
          display: inline-block;
          width: 30%;
          height: 10rpx;
          background: linear-gradient(to right, $color-primary, #c8e4ff);
          z-index: -1;
          border-radius: 20%;
        }
      }
    }
    .login-input-wrapper {
      padding: 20rpx;
      background-color: #ffffff;
    }
  }
}
// u-form-item__message
::v-deep .u-form-item__body__right__message {
  margin-left: 0 !important;
}
</style>
